<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件切换</title>
    <script src="../../lib/vue.js"></script>
    <style>
        /*在组件还未进入或者已经离开的时候，组件的位置在哪*/
        .v-enter,
        .v-leave-to{
            transform: translateX(100px);
        }

        /*在过渡期，会有什么变化*/
        .v-enter-active,
        .v-leave-active{
            transition: all .5s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <a @click.prevent="flag=true">登录 </a>
        <a @click.prevent="flag=false">注册 </a>

        <!--方式1：通过v-if,v-else,flag标识符来切换-->
        <transition>
           <login v-if="flag"></login>
           <logout v-else="flag"></logout>
        </transition>
        <hr/>
        <a @click.prevent="comName='login'">登录 </a>
        <a @click.prevent="comName='logout'">注册 </a>

        <!--方式2:通过vue提供的 component标签来实现,可以切换多个组件,且只有写一个就可了-->
        <component :is="comName"></component>
    </div>

    <template id="tmp1">
        <h4>登录界面</h4>
    </template>

    <template id="tmp2">
        <h4>注册界面</h4>
    </template>
    <script>

        Vue.component('login',{
            template:"#tmp1"
        });

        Vue.component('logout',{
            template:"#tmp2"
        });

        var vue = new Vue({
            el:'#app',
            data:{
                flag:true,
                comName:"login"
            },
            methods:{

            }
        });
    </script>
</body>
</html>